import React, { Component } from 'react';
import {Row, Col, List, Tree, Button, message, Form, Input, Divider, Card, Popconfirm, Modal,Table} from 'antd';
import {getRoleList,getResources,getFunsByRoleId,saveRelations,saveRole,saveUserToRole,
    removeRole,getUserList,getRolesByUserId} from "../api/Security";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {delFormFolder, getFormFolderTree} from "../api/formManagement";
export default class UserRole extends Component {
    state = {
        data: [],   //用户
        treeData:[],  //角色  部署tree
        selectedUserId:-1 ,//选中的角色id
        selectedUserName:"" ,//选中的角色名称
        checkedKeys:[],  //选中的节点
        selectedRowKeys: [], // Check here to configure the default column
        loading: false,
        //newRoleName:"",  //新增加的角色名
    }

    componentDidMount() {
        getUserList().then(
            (res) => {
                //得到角色列表
                getRoleList().then(
                    (res2)=>{
                        this.setState({
                            treeData:res2.data,
                            data: res.data
                        })
                    }
                )
            },
            (error) => {
                console.log("get role List failed!");
            }
        );
    }


    onSelect_User=(item)=>{
        getRolesByUserId(item.userId).then(
            (res) => {
                this.setState({
                    //checkedKeys:res.data,
                    selectedRowKeys: res.data,
                    selectedUserName:item.loginName,
                    selectedUserId:item.userId})
                //this.rowSelection.onChange([1],[{roleId:1}]);
            },
            (error) => {
                console.log("get role List failed!");
            }
        );
       //  console.log(item);
    }

    // save
    saveRelations=()=>{
        let _userId=this.state.selectedUserId;
        let _checkedKeys=this.state.selectedRowKeys;
        saveUserToRole(_userId,_checkedKeys).then(
            (res) => {
               message.success("保存成功")
            },
            (error) => {
                console.log("get role List failed!");
                message.fail("保存失败")
            }
        );
    }

     columns_role = [
        {
            title: '角色名称',
            dataIndex: 'roleName',
        }
    ];

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };


    render() {
        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        return (
            <>
                <Row>
                    <Col span={12}>
                            <List
                                // size="large"
                                itemLayout="horizontal"
                                header={<div>用户列表</div>}
                                // footer={<div>Footer</div>}
                                bordered
                                dataSource={this.state.data}

                                renderItem={item => <List.Item actions={[
                                    <Button onClick={()=>this.onSelect_User(item)}  type="primary">选择</Button>
                                ]}>{item.loginName}-{item.name}</List.Item>}
                            />

                    </Col>
                    <Col  span={12}>
                        <Row justify="space-around">
                            <div>
                                <h3>
                                    选择的角色为：   {this.state.selectedUserName}
                                </h3>
                            </div>
                            <Button  type="primary" onClick={this.saveRelations}>保存</Button>
                        </Row>

                        <Table
                            rowSelection={{
                                type: "checkbox",
                                ...rowSelection,
                            }}
                            columns={this.columns_role}
                            dataSource={this.state.treeData}
                            pagination={false}
                        />
                    </Col>
                </Row>



            </>



        )
    }
}
